<template>
	<view class="box">
		<swiper class="swipers" indicator-color="#D0D2D4" indicator-active-color="#FFF" :indicator-dots="indicatorDots"
		 :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item class="items" v-for="(item,index) in list" :key="item.id">
				<image :src="item.carousel_url" mode="scaleToFill" style="width: 690rpx; height: 380rpx;"></image>
			</swiper-item>
		</swiper>

		<view class="zhanshi">
			<view class="textarrItem" v-for="(item,index) in textarr" :key="item.id" @click="jump(index)">
				<image :class="'cls'+index" v-if="item.icon_url" :src="item.icon_url" mode="scaleToFill" style="width: 90rpx; height: 90rpx;"></image>
				<text>{{item.icon_title}}</text>
			</view>
		</view>

		<view class="xiao">
			<text>爱牙小贴士</text>
			<image src="http://assessgeek.oss-cn-hangzhou.aliyuncs.com/upload/20200728/1ef56b81c63044f1a06330fb379ea6048f30c39d.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		created() {
			this.getSwipers();
			this.getbarnar();
			this.getlocations();
		},
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				list: null,
				textarr: null,
			};
		},
		methods: {
			async jump(index) {
				// 金刚区
				let urls = null;
				switch (index) {
					case 0:
						urls = `../../planttool/planttool?title=牙齿矫正&id=${this.textarr[index].id}`;
						break;
					case 1:
						urls = `../../planttool/planttool?title=洗牙&id=${this.textarr[index].id}`;
						break;
					case 2:
						urls = `../../planttool/planttool?title=牙齿治疗&id=${this.textarr[index].id}`;
						break;
					case 3:
						urls = `../../planttool/planttool?title=牙齿美白&id=${this.textarr[index].id}`;
						break;
					case 4:
						urls = `../../planttool/planttool?title=种植牙&id=${this.textarr[index].id}`;
						break;
					case 5:
						urls = `../../planttool/planttool?title=防蛀牙&id=${this.textarr[index].id}`;
						break;
					case 6:
						urls = `../../planttool/planttool?title=烤瓷牙&id=${this.textarr[index].id}`;
						break;
					case 7:
						urls = `../../planttool/planttool?title=儿童齿科&id=${this.textarr[index].id}`;
						break;
				};
				uni.navigateTo({
					url: urls
				})

			},

			async getbarnar() {
				uni.request({
					url: "https://chat.assessgeek.com/api/Pagelist/getIcon",
					success: res => {
						this.textarr = res.data.data;
					}
				});
			},

			async getSwipers() {
				uni.request({
					url: "https://chat.assessgeek.com/api/Pagelist/getImages",
					success: res => {
						this.list = res.data.data;
					}
				});
			},

			// 获取经纬度
			async getlocations() {
				uni.getLocation({
					type: 'wgs84',
					success: res => {
						console.log(res.latitude);
						console.log(res.longitude);
						this.$store.commit("storeLongitudeAndLatitude", {
							latitude: res.latitude,
							longitude: res.longitude
						});
					}
				});
			}

		}
	}
</script>

<style lang="scss">
	.swipers {
		margin: 30rpx auto;
		width: 690rpx;
		height: 380rpx;

		.items {
			width: 100%;
			border-radius: 10rpx;

			image {
				border-radius: 10rpx;
			}
		}
	}

	.zhanshi {
		margin: 45rpx auto 0rpx;
		width: 645rpx;
		display: flex;
		flex-wrap: wrap;
		@include chuizhilianduan;

		.textarrItem {

			&:nth-of-type(n+5) {
				margin-top: 34rpx;
			}

			width: 22%;
			height: 135rpx;
			@include shuipingchuijuzhong;
			flex-wrap: wrap;

			>text {
				display: inline-block;
				width: 100%;
				text-align: center;
				margin-top: 8rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, 1);
			}
		}
	}

	.xiao {
		width: 690rpx;
		margin: 55rpx auto 0rpx;

		text {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 1);
			position: relative;
			padding-left: 20rpx;

			&::before {
				width: 8rpx;
				height: 26rpx;
				display: block;
				content: "";
				background-color: rgba(45, 209, 188, 1);
				border-radius: 5rpx;
				@include chuizhi;
				left: -1rpx;
			}
		}

		image {
			margin-top: 30rpx;
			width: 690rpx;
			height: 447rpx;
		}
	}

	/* $alpha1: 0.1;
	$color0: #2379f5;
	$color1: #f36b36;

	.cls0 {
		box-shadow: 8rpx 8rpx 2rpx rgba($color: $color0, $alpha: $alpha1);
	}

	.cls1 {
		box-shadow: 8rpx 8rpx 2rpx rgba($color: #000000, $alpha: $alpha1);
	} */
</style>
